<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件生命周期</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="Application">
    </div>
  </body>

  <script>
    const root= {
      beforeCreate(){
        console.log("组件创建前")
      },
      created(){
        console.log("组件创建完成")
      },
      beforeMount(){
        console.log("组件创挂载前")
      },
      mounted(){
        console.log("组件创挂完成")
      },
      beforeUpdate(){
        console.log("组件更新前")
      },
      updated(){
        console.log("组件更新完成")
      },
      activated(){
        console.log("被缓存的组件激活时调用")
      },
      deactivated(){
        console.log("被缓存的组件停用时调用")
      },
      beforeUnmount(){
        console.log("组件即将被卸载前调用")
      },
      Unmounted(){
        console.log("组件被卸载后调用")
      },
      errorCaptured(error, instance, info){
        console.log("捕获来自组件的异常时调用")
      },
      renderTracked(event){
        console.log("虚拟DOM重新渲染时调用")
      },
      renderTriggered(event){
        console.log("虚拟DOM被触发渲染时调用")
      } 
    }
    Vue.createApp(root).mount("#Application")

    <!-- 程序终端输出
组件创建前
组件创建完成
组件创挂载前
组件创挂完成
        -->

  </script>

</html>